<template>
  <div>
    <el-container>
      <el-header>
        <!-- 头像 -->
        <el-image
          style="width: 3rem; height: 100%"
          :src="url"
          :fit="'fill'"
        ></el-image>
        <h2 style="margin: 0 5px; color: white">基础地理信息共享平台</h2>
      </el-header>

      <!--注册信息表主体 -->
      <el-main>
        <el-card id="registeredInfo">
          <!-- 表单 -->
          <el-form ref="userRegFormRef" :model="userReg" :rules="userRegRules">
            <el-form-item label="用户ID" prop="userid"
              ><el-input v-model="userReg.userid"
            /></el-form-item>
            <el-form-item label="密码" prop="password"
              ><el-input v-model="userReg.password"
            /></el-form-item>
            <el-form-item label="用户名" prop="username"
              ><el-input v-model="userReg.username"
            /></el-form-item>
            <el-form-item label="电话号码" prop="phoneNumber"
              ><el-input v-model="userReg.phoneNumber"
            /></el-form-item>
            <el-form-item label="邮箱" prop="email"
              ><el-input v-model="userReg.email"
            /></el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(userRegFormRef)"
                >确认注册</el-button
              ></el-form-item
            >
          </el-form>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { reactive, ref, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { registeredReq } from "@/networks/registered.js";
import { User } from "@/publicObject/User.js";
import {useRouter} from "vue-router"
export default {
  setup() {
    const url = require("../assets/image/地球.png"); //首页图标
    const userReg = reactive(new User()); //存储用户注册信息
    const userRegFormRef = ref();
    const userRegRules = reactive({
      //注册信息校验规则
      userid: [
        {
          required: true,
          message: "请输入用户ID",
          trigger: "blur",
        },
        {
          min: 5,
          max: 15,
          message: "用户ID长度需要在5到15位之间",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        { min: 9, max: 15, message: "密码长度应为9到15位", trigger: "blur" },
      ],
      username: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
        { min: 3, max: 10, message: "用户名长度应为3到10位", trigger: "blur" },
      ],
      phoneNumber: [
        {
          required: true,
          message: "请输入正确的电话号码",
          trigger: "blur",
        },
        { min: 11, max: 11, message: "电话号码无效", trigger: "blur" },
      ],
      email: [
        {
          required: false,
          message: "请输入邮箱",
          trigger: "blur",
        },
        { min: 0, max: 25, message: "邮箱非法", trigger: "blur" },
      ],
    });
    return {
      url,
      userReg,
      userRegRules,
      userRegFormRef,
    };
  },
  name: "registered",
  data() {
    return {};
  },
  methods: {
    // 表单校验函数
    async submitForm(formEl) {
      // const userRegFormRef = this.$refs.userRegFormRef;//获取表单DOM
      // console.log(userRegFormRef);
      if (!formEl) return;
      await formEl.validate(async (valid, fields) => {
        if (valid) {
          try {
            const { data: res } = await registeredReq(
              new User(
                this.userReg.userid,
                this.userReg.password,
                this.userReg.username,
                this.userReg.phoneNumber,
                this.userReg.email
              )
            );
            if (res.status != 200) {
              ElMessage.error("注册失败，请稍后重试");
              // console.log(res);
            } else {
              ElMessage.success("注册成功");
              this.$router.push("./login")
              // console.log(res)
            }
          } catch (err) {
            console.log(err);
          }

          //表单校验无误，执行注册
        } else {
          ElMessage.error("注册失败，请检查信息填写是否正确");
        }
      });
    },
  },

  data(){
    return{
      formData: {
        data: null,
      }
    }
  },
  methods:{
    //获取数据
    getData(){
      // this.formData.data = 数据
    }
  }
  
};
</script>

<style lang="less" scoped>
.el-header {
  width: 100vw;
  height: 3rem;
  background-color: #12afe3;
  display: flex;
  align-items: center;
}

.el-main {
  display: flex;
  justify-content: center;
  width: 100vw;
  height: calc(100vh - 3rem);
  // 注册表单样式
  #registeredInfo {
    width: 80vw;
    padding: 1rem 0rem 0rem 0;
    .el-form {
      width: 80%;
      margin: 0 auto;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .el-form-item {
        width: 70%;
        margin: 2rem 0;
      }
    }
  }
}
</style>
